<!DOCTYPE html>
<style>body { margin:8px; }</style>
<div style="columns:2; width:25px; column-gap:5px; height:10px; column-fill:auto;">
    <div id="elm" style="margin-left:-20px; margin-top:-25px; width:4000px; height:40px;"></div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    test(() => {
        var elm = document.getElementById("elm");
	var rects = elm.getClientRects();
	assert_equals(rects.length, 2);
	// #elm is offset -20px,-25px relatively to its multicol container, due
	// to negative margins. BODY is offset 8px,8px due to its margin. So the
	// absolute offset will be (-20px+8px),(-25px+8px) = -12px,-17px. The
	// width will be the unclipped bounding box of #elm, while the height
	// will be as much as it can fit in the first column. Since there's a
	// top margin of -25px, and column height is 10px, we're going to be
	// able to fit 10px - (-25px) = 35px.
	assert_equals(rects[0].left, -12);
	assert_equals(rects[0].top, -17);
	assert_equals(rects[0].width, 4000);
	assert_equals(rects[0].height, 35);
	// Since the first column could fit 35px of #elm's height, there's 5px
	// left for it here in the second column.
	assert_equals(rects[1].left, 3);
	assert_equals(rects[1].top, 8);
	assert_equals(rects[1].width, 4000);
	assert_equals(rects[1].height, 5);

	// Check that the getBoundingClientRect() agrees with the union of the
	// two rects above.
	var boundingClientRect = elm.getBoundingClientRect();
	var left = Math.min(rects[0].left, rects[1].left);
	var right = Math.max(rects[0].right, rects[1].right);
	var top = Math.min(rects[0].top, rects[1].top);
	var bottom = Math.max(rects[0].bottom, rects[1].bottom);
	assert_equals(boundingClientRect.left, left);
	assert_equals(boundingClientRect.right, right);
	assert_equals(boundingClientRect.top, top);
	assert_equals(boundingClientRect.bottom, bottom);
    }, "getClientRects should include overflow");
</script>
